<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link type="text/css" rel="stylesheet" href="/css/index.css">
    <link type="text/css" rel="stylesheet" href="/jars/bootstrap-table/bootstrap-table.css">
    <link type="text/css" rel="stylesheet" href="/jars/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="/jars/bootstrap/css/bootstrap-responsive.css">
    <script type="text/javascript" src="/jars/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/AjaxFileupload.js"></script>
    <script type="text/javascript" src="/jars/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="/jars/bootstrap-table/bootstrap-table-locale-all.js"></script>
    <script type="text/javascript" src="/jars/bootstrap/js/bootstrap.js"></script>
    <style>
        table.table tbody tr td.text-center {
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <div>
        <form id="search_User" style="padding-left: auto;padding-right: auto">
            <p class="panel-body search_box">
            <p class="search_p">
                <label for="search_name">用户姓名：</label>
                <input type="text" class="form-control" id="search_name" name="uname">
            </p>
            <p class="search_p">
                <label for="search_sex">性别：</label>
                <select class="form-control" id="search_sex" name="sex">
                    <option value="">---请选择---</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <p class="search_p">
                <label for="search_name">用户账号：</label>
                <input type="text" class="form-control" id="username" name="username">
            </p>
            </p>
            <p class="panel-body search_box" style="text-align: right;">
                <input type="button" class="btn btn-primary" value="搜索" onclick="searchUser()"/>
                <input type="button" class="btn btn-primary" value="新增用户" onclick="addUser()"/>
            </p>
        </form>
    </div>
    <table class="bootstrap-table table" id="#dataTable"
           data-toggle="table"
           data-side-pagination="server"
           data-pagination="true"
           data-page-number="1"
           data-query-params=queryParams
           data-page-size="10"
           data-page-list="[10,20,30]"
           data-url="/user/queryData">
        <thead>
        <tr>
            <th class="text-center" data-field="uid">用户ID</th>
            <th data-class="text-center" data-field="uname">用户名称</th>
            <th data-class="text-center" data-field="username">账号</th>
            <th data-class="text-center" data-field="sex">性别</th>
            <th data-class="text-center" data-field="age">年龄</th>
            <th data-class="text-overborder" data-field="address">住址</th>
            <th data-class="text-center" data-formatter="operation">操作</th>
        </tr>
        </thead>
    </table>
</div>
</body>
<script type="text/javascript">
    $(function () {

        $(".bootstrap-table").on("load-success.bs.table", function () {
            $('.bootstrap-table tr td.text-overborder').each(function () {
                $(this).attr("title", $(this).text());
                $(this).css("cursor", 'pointer');
            });
        }).on("click", ".btn-update", function () {
            var id = $(this).attr("data-id");
            window.location.href = "/user/toUpdate?id=" + id;
        }).on("click", ".btn-role-manager", function () {
            var id = $(this).attr("data-id");
            window.location.href = "/role/manager?id=" + id;
        });
    });

    function queryParams(params) {debugger;
        getData("#search_User",params);
        return params;
    }

    function operation(value, row, index) {
        var ope = '';
        ope += '<input type="button" data-id = "' + row.uid + '" class="btn btn-update" value="修改" >'
        ope += '<input type="button" data-id = "' + row.uid + '" class="btn btn-role-manager" value="权限管理" >'
        return ope;
    }

    function searchUser() {
        $(".bootstrap-table").bootstrapTable('refresh');
    }

    function updateUser() {
        debugger;

        $.ajax({
            type: 'post',
            data: getData("#registerForm"),
            url: '/user/updateUser',
            success: function (data) {
                alert(data.message);
                setTimeout(function () {
                    window.location.href = "/";
                }, 3000)
            }
        });
    }
</script>
</html>
